<gm:page title="Xmap" authenticate="false" onload="initApp()">

    <script type="text/javascript">
        <![CDATA[

            var mapObj;
            var apiDirectionsObj;
            var apiTrafficOverlayObj;
            var directionsDiv;
            
            var startSelect;
            var parkSelect;
            var endSelect;
            
            var parkList;

            function initApp() {
                mapObj = google.mashups.getObjectById("mapDisplay").getMap();

                directionsDiv = document.getElementById("mapDirections");

                apiDirectionsObj = new GDirections(mapObj, directionsDiv);

                apiTrafficOverlayObj = new GTrafficOverlay();
                mapObj.addOverlay(apiTrafficOverlayObj);

                parkSelect = document.getElementById("parkSelect");
                parkList = google.mashups.getObjectById("parkList");
                parkList.setData(parkSelect.options[parkSelect.selectedIndex].value);
      
                startSelect = document.getElementById("popUpMenu1");
                endSelect = document.getElementById("popUpMenu2");
            }

            function populatePopUps() {
                if (parkList.getData().size() != 0)
                {
                    startSelect.innerHTML = '<option selected="selected">Choose a starting point</option>';
                    endSelect.innerHTML = '<option selected="selected">Choose an end point</option>';

                    var parkFeed = parkList.getData();

                    var titleGPath = new GPath("atom:title");
                    var longGPath = new GPath("gd:long");
                    var latGPath = new GPath("gd:lat");

                    for (var i=0; i<parkFeed.size(); i++) {
                        var entry = parkFeed.entryAt(i);

                        var option1 = document.createElement("option");
                        option1.value = latGPath.getValue(entry).toString() + " " + longGPath.getValue(entry).toString();
                        option1.innerHTML = titleGPath.getValue(entry);
                        startSelect.appendChild(option1);

                        var option2 = document.createElement("option");
                        option2.value = latGPath.getValue(entry).toString() + " " + longGPath.getValue(entry).toString();
                        option2.innerHTML = titleGPath.getValue(entry);
                        endSelect.appendChild(option2);
                    }
                    var parkSelect = document.getElementById("parkSelect");
                    var mapDisplay = google.mashups.getObjectById("mapDisplay");
                    mapDisplay.setData(parkSelect.options[parkSelect.selectedIndex].value);
                }
            }

            function getDirections() {
                var directionsCell = document.getElementById("directionsCell");
                var mapCell = document.getElementById("mapCell");

                apiDirectionsObj.clear();

apiDirectionsObj.load(startSelect.options[startSelect.selectedIndex].value
+ " to " + endSelect.options[endSelect.selectedIndex].value);
            }

            function loadPark() {
              parkList.setData(parkSelect.options[parkSelect.selectedIndex].value.toString());
            }
        ]]>
    </script>

    <gm:list id="parkList" style="display:none">
        <!--<gm:handleEvent event="onrefresh" execute="populatePopUps()" />-->
    </gm:list>

    <div align="center">
      <input type="button" value="Hack" onclick="populatePopUps()" />
      <br />
      <select id="parkSelect" onChange="loadPark()">
        <option value="${app}/CAParks" selected="selected">CA State Parks</option>
        <option value="${app}/RIParks">RI State Parks</option>
      </select>
    </div>
    <p></p>

<select id="popUpMenu1"> <option>-- Choose a starting point
--</option> </select> <select id="popUpMenu2">
<option>-- Choose an end point --</option> </select>
<input type="button" value="Get directions"
onclick="getDirections()" /> <p></p> <table
width="100%"> <tr> <td id="mapCell" valign="top">
<gm:map id="mapDisplay" width="100%" style="border: solid black 1px"
control="large" maptypes="true" latref="gd:lat" lngref="gd:long"
infotemplate="parkInformation" /> </td> </tr> <tr>
<td id="directionsCell" valign="top"> <div
id="mapDirections"></div> </td> </tr>
</table> <gm:template id="parkInformation"> <div
repeat="true"> <gm:text ref="atom:title" /> <br /> Lat:
<gm:text ref="gd:lat" /> <br /> Lng: <gm:text
ref="gd:long" /> </div> </gm:template>
</gm:page>